<template>
  <div class="app-container">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="档次名"></el-table-column>
      <el-table-column prop="price" label="充值金额"></el-table-column>
      <el-table-column prop="myprice" label="实得金额"></el-table-column>
      <el-table-column prop="shop" label="门店"></el-table-column>
      <el-table-column prop="userdata" label="有效期"></el-table-column>
      <el-table-column prop="use" label="启用">
        <template slot-scope="scope" style="display:flex;align-items: center;">
          <img
            src="../../../assets/img/dui.png"
            v-if="scope.row.use"
            style="width:14px;height:14px;margin-right:6px;"
            alt
          />
        </template>
      </el-table-column>
      <el-table-column prop="show" label="显示">
        <template slot-scope="scope" style="display:flex;align-items: center;">
          <img
            src="../../../assets/img/dui.png"
            v-if="scope.row.show"
            style="width:14px;height:14px;margin-right:6px;"
            alt
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click.native.prevent="showdata(scope.$index, tableData)" type="text">显示</el-button>
          <el-button @click.native.prevent="stopuse(scope.$index, tableData)" type="text">停用</el-button>
          <el-button @click.native.prevent="editdata(scope.$index, tableData)" type="text">编辑</el-button>
          <el-button @click.native.prevent="del(scope.$index, tableData)" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "充300得400",
          price: "300元",
          myprice: "400元",
          shop: "-",
          userdata: "24月",
          use: true,
          show: true
        },
        {
          name: "充300得400",
          price: "300元",
          myprice: "400元",
          shop: "-",
          userdata: "24月",
          use: true,
          show: true
        },
        {
          name: "充300得400",
          price: "300元",
          myprice: "400元",
          shop: "-",
          userdata: "24月",
          use: true,
          show: true
        },
        {
           name: "充300得400",
          price: "300元",
          myprice: "400元",
          shop: "-",
          userdata: "24月",
          use: true,
          show: true
        }
      ]
    };
  },
  methods: {}
};
</script>

